<script>
import { defineComponent, inject, reactive, ref, toRaw } from 'vue'
import {
  tagListTagGroup,
  tagAddTagGroup,
  tagModifyTagGroup,
  tagDelTagGroup,
} from '@Config/server/api'
import DataTable from '@Components/dataTable'
import { createPagination, Messages } from '@Config/config'
import { message, Modal } from 'ant-design-vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import ColorBlock from '@Components/colorBlock'
import { useUrl, transform_pre_fn } from '@Hooks/url'
import { useRoute } from 'vue-router'
import MarkGroupForm from '@Page/myMarkGroup/components/form'
import { useWin } from '@Hooks/win'
import { findIndex } from 'lodash'
export default defineComponent({
  components: {
    DataTable,
    MakeForm,
    ColorBlock,
  },
  setup(props, context) {
    let rightMenu = inject('rightIconMenu')
    rightMenu.data = null

    let form_config = [
      // {
      //   key: 'showType',
      //   initValue: 0,
      //   uiType: 'select',
      //   source: _SHOW_TYPE_LIST_FN(),
      //   col: { span: 6 },
      //   formItem: { label: '可见用户类型' },
      //   attr: { placeholder: '可见用户类型' },
      // },
      // {
      //   key: 'type',
      //   initValue: 0,
      //   uiType: 'select',
      //   source: TYPE_LIST(),
      //   col: { span: 6 },
      //   formItem: { label: '公告类型' },
      //   attr: { placeholder: '公告类型' },
      // },
      // {
      //   key: 'button',
      //   initValue: null,
      //   uiType: 'custom',
      //   col: { span: 5 },
      //   ui: (
      //     <a-space>
      //       <a-button
      //         type="primary"
      //         onClick={searchHandler}
      //         v-slots={{
      //           icon: () => {
      //             return <SearchOutlined />
      //           },
      //         }}
      //         loading={loading.search_loading}
      //       >
      //         搜索
      //       </a-button>
      //       <a-button
      //         type="primary"
      //         danger
      //         onClick={resetHandler}
      //         v-slots={{
      //           icon: () => {
      //             return <ClearOutlined />
      //           },
      //         }}
      //         loading={loading.search_loading}
      //       >
      //         重置
      //       </a-button>
      //     </a-space>
      //   ),
      // },
    ]
    let form_state = reactive({ data: MakeFormState(form_config) })

    //表格数据配置
    let tableData = reactive({
      data: {
        source: [],
        columns: [
          {
            key: 'name',
            dataIndex: 'name',
            title: '好友备注',
            width: '33%',
          },
          {
            key: 'child',
            width: '33%',
            dataIndex: 'child',
            title: '好友账号',
            transform: (text, record, index) => {
              return <span>{record.child.map((x) => x.name).join('，')}</span>
            },
          },
          {
            key: 'operation',
            dataIndex: 'operation',
            title: '操作',
            width: '33%',
            transform: (text, record, index) => {
              return (
                <a-space>
                  <a-button
                    type="primary"
                    size="small"
                    onClick={() => {
                      markGroupWin({
                        params: {
                          record,
                        },
                        attr2: {
                          title: '编辑标签组',
                        },
                      })
                    }}
                  >
                    分享文件
                  </a-button>
                  <a-button
                    type="primary"
                    size="small"
                    onClick={() => {
                      markGroupWin({
                        params: {
                          record,
                        },
                        attr2: {
                          title: '编辑标签组',
                        },
                      })
                    }}
                  >
                    修改备注
                  </a-button>

                  <a-popconfirm
                    title="确定要执行此项操作吗？"
                    onConfirm={async () => {
                      record.local_loading = true
                      let _r = await tagDelTagGroup({ id: record.id })
                      record.local_loading = false

                      if (_r.code == 0) {
                        Messages.add(message.success(`删除成功`))
                        tableData.data.source.splice(index, 1)
                      } else {
                        Messages.add(message.error(`删除失败[${_r.msg}]`))
                      }
                    }}
                  >
                    <a-button
                      type="primary"
                      danger
                      size="small"
                      loading={record.local_loading}
                    >
                      删除
                    </a-button>
                  </a-popconfirm>
                </a-space>
              )
            },
          },
        ],
      },
    })

    //表格loading状态
    let loading = reactive({ search_loading: false, delete_loading: false })

    let resetHandler = () => {
      form_ref.value.resetState()
      pagination.data.current = 1
      searchData()
    }
    //查询按钮监听
    let searchHandler = () => {
      pagination.data.current = 1
      searchData()
    }
    let route = useRoute()

    let { fromStateToQuery } = useUrl({
      fn: async () => {
        loading.search_loading = true
        let _params = {
          // ...form_state.data,
          index: pagination.data.current,
          size: pagination.data.pageSize,
        }
        let _result = await tagListTagGroup(_params)
        if (_result.code != 0) {
          Messages.add(message.error('查询失败' + _result.msg))
          return
        }
        pagination.data.pageSize = _result.data?.size
        pagination.data.current = _result.data?.index
        pagination.data.total = _result.data?.total
        tableData.data.source = _result.data?.records
        loading.search_loading = false
      },
      formState: [
        // {
        //   key: 'showType',
        //   fn: (x) => {
        //     if (x) {
        //       return Number(x)
        //     } else {
        //       return 0
        //     }
        //   },
        // },
        // {
        //   key: 'type',
        //   fn: (x) => {
        //     if (x) {
        //       return Number(x)
        //     } else {
        //       return 0
        //     }
        //   },
        // },
      ],
    })
    //查询数据
    let searchData = async () => {
      fromStateToQuery({ path: route.path })
    }

    //表格分页
    let pagination = reactive({
      data: createPagination(searchData, true, false),
    })

    //分页点击
    // pagination.data.onChange = (pageNumber, pageSize) => {
    //   pagination.data.current = pageNumber
    //   pagination.data.pageSize = pageSize
    //   searchData()
    // }
    //ref dom
    let form_ref = ref(null)
    //新增公告回调函数

    //默认查询
    //searchData()

    let [markGroupWin] = useWin({
      component: (
        <MarkGroupForm
          onResult={async ({ info, iCallBack }) => {
            if (info.id == 0) {
              //新增
              let _r = await tagAddTagGroup(info)
              if (_r.code == 0) {
                Messages.add(message.success(`操作成功`))
                tableData.data.source.push(_r.data)
              } else {
                Messages.add(message.error(`操作失败[${_r.msg}]`))
              }
              iCallBack(_r)
            } else {
              //修改编辑
              let _r = await tagModifyTagGroup(info)
              if (_r.code == 0) {
                Messages.add(message.success(`操作成功`))
                let _index = findIndex(tableData.data.source, { id: info.id })
                tableData.data.source.splice(_index, 1, _r.data)
              } else {
                Messages.add(message.error(`操作失败[${_r.msg}]`))
              }
              iCallBack(_r)
            }
          }}
        />
      ),
    })

    return {
      tableData,
      loading,
      pagination,
      form_config,
      form_state,
      form_ref,
    }
  },
  render() {
    return (
      <>
        {this.loading.search_loading ? (
          <a-spin tip="数据加载中..." />
        ) : (
          <a-row gutter={[20, 20]}>
            <a-col span={24}>
              {
                //   <MakeForm
                //   ref="form_ref"
                //   formConfig={this.form_config}
                //   value={this.form_state.data}
                // />
              }
            </a-col>

            <a-col span={24}>
              <DataTable
                data={this.tableData}
                loading={this.loading}
                uiAttr={{
                  scroll: { x: null },
                  tableLayout: 'fixed',
                  bordered: true,
                }}
              >
                <a-space></a-space>
              </DataTable>
              <a-affix {...this.pagination_affix_attr()}>
                <div class="affix">
                  <a-pagination {...this.pagination.data} />
                </div>
              </a-affix>
            </a-col>
          </a-row>
        )}
      </>
    )
  },
})
</script>
